<template>
	<view>

		<view class="nav">
			<image class="nav-bg" src="https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/pk-bg.png"
				mode="" />
			<view class="pk">
				<!-- <uni-icons type="arrow-left" color="white" size="30" @click="goBack"></uni-icons> -->
				<image class="arrow" src="/static/icons/nav-arrow.png" @click="goBack()" />
				<text>对战详情</text>
			</view>
		</view>

		<view class="detail-content">

			<products-swiper-pk :data="banners" :list="detail.products" @sharegame="sharegame" />

			<prize-game-tab v-model:tab="tab" :tabs="tabs" @change="listRecords({ refresh: true })"
				style="display: block; margin-top: 10px; " />

			<view class="tab-content">
				<view v-if="tab === '赏品一览'" class="products-list">
					<view class="item" v-for="item in detail.products" :key="item.id" @click="showDialogImage(item)">
						<view class="img">
							<image class="game-img" :src="item.image" />
							<view v-if="item.stock === 0" class="finish">
								<!-- <image src="/static/product-item-soldout.png" class="image" /> -->
							</view>
							<view class="quantity">
								数量：{{ item.showStock }}
							</view>
							<view class="tag">{{ item.type }}</view>
						</view>
						<view class="name">
							{{ item.name }}
						</view>
						<view class="price">
							{{ item.percent?item.percent:item.price/100 }}
						</view>
					</view>
				</view>

				<view v-if="tab === '对战记录'" class="records-list">
					<view class="records-item" v-for="(item,index) in recordsList" :key="item.id"
						:class="[item.blue && item.blue.outcome === '胜利'? 'records-item-blue' :item.red && item.red.outcome === '胜利' ? 'records-item-red':'']">
						<view class="record-detail">
							<view class="player blue"
								:class="[item.blue && item.blue.outcome === '失败'? 'records_itemgray' :'']"
								@click="openclickpay(0,index,item.id)">
								<view class="left location">
									<view>蓝方</view>
									<view class="avatar">
										<image v-if="item.blue" :src="item.blue.avatar" mode="" />
										<view class="graybg"
											:class="[item.blue && item.blue.outcome === '失败'? 'itemgray' :'']">
										</view>
									</view>
								</view>
								<view class="right pk-info">
									<view>{{ item.blue ? item.blue.outcome : '待揭晓' }}</view>
									<view>
										<view>{{ item.blue ? item.blue.prizeType :'' }}</view>
										<view class="pk-info-name">{{ item.blue ? item.blue.prizeName: '' }}</view>
									</view>
									<view>
										<view>{{item.blue ? item.blue.nickname : '等一位欧皇' }}</view>
										<view>{{ item.blue ? item.blue.time : currentDate }}</view>
									</view>
								</view>
								<view v-if="item.blue && item.blue.outcome === '胜利'" class="crown">
									<image src="/static/pk-crown.png" mode="" />
								</view>
								<view v-if="item.blue && item.blue.img" class="result">
									<image :src="item.blue.img" mode="" />
								</view>
								<view class="doubleclick"
									v-if="(item.red && item.red.isclick) || (item.blue && item.blue.isclick)">
									<image
										src="https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/doubleclick.png"
										@click.stop="openclickpay(0,index,item.id,true)">
									</image>
									<text>{{downtext}}S</text>
								</view>
							</view>
							<view class="player  red"
								:class="[item.red && item.red.outcome === '失败' ? 'records_itemgray':'']"
								@click="openclickpay(1,index,item.id)">
								<view class="left pk-info">
									<view>{{ item.red ? item.red.outcome : '待揭晓' }}</view>
									<view>
										<view>{{ item.red ? item.red.prizeType : '' }}</view>
										<view class="pk-info-name">{{ item.red ? item.red.prizeName : '' }}</view>
									</view>
									<view>
										<view>{{ item.red ? item.red.nickname : '等一位欧皇' }}</view>
										<view>{{ item.red ? item.red.time : currentDate }}</view>
									</view>
								</view>
								<view class="right location">
									<view>红方</view>
									<view class="avatar">
										<image v-if="item.red" :src="item.red.avatar" mode="" />
										<view class="graybg"
											:class="[item.red && item.red.outcome === '失败'? 'itemgray' :'']">
										</view>
									</view>
								</view>
								<view v-if="item.red && item.red.outcome === '胜利'" class="crown">
									<image src="/static/pk-crown.png" mode="" />
								</view>
								<view v-if="item.red && item.red.img" class="result">
									<image :src="item.red.img" mode="" />
								</view>
								<view class="doubleclick"
									v-if="(item.red && item.red.isclick) || (item.blue && item.blue.isclick)">
									<image
										src="https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/doubleclick.png"
										@click.stop="openclickpay(1,index,item.id,true)">
									</image>
									<text>{{downtext}}S</text>
								</view>
							</view>
						</view>
					</view>
					<view v-if="recordsList.length === 0" class="nofull">
						<image src="./static/pk-nofull.png" />
					</view>
				</view>

				<view style="height: 100%" v-if="tab === '购买说明'">
					<view class="instructions">
						<image class="bg"
							src="https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/pk-instructions.png"
							mode="widthFix"></image>
						<text class="title">购买说明</text>
						<scroll-view scroll-y="true" style="height: 120px;" class="content">
							<text class="content">
								{{ detail.instruction }}
							</text>
						</scroll-view>

					</view>
				</view>

			</view>

			<view class="buy-area">
				<view class="buy-btn" v-for="(item, index) in rechargePrices" :key="index" @click="showPayDialog(item)">
					<image class="game-img" :src="item.bg" />
					<view class="price"><text>￥{{ item.showPrice }}</text></view>
				</view>
			</view>

			<van-dialog use-slot :show="isCouponModalVisible" :show-confirm-button="false" width="312">
				<prize-dialog-content :image="dialogItem.image" :name="dialogItem.name" :price="dialogItem.price"
					v-on:close="closeCouponModal" />
			</van-dialog>

			<pay v-if="payBoxShow" :gameId="detail.id" gameType="欧皇对决" :image="detail.main_photo" :price="buyPrice"
				:prices="rechargePrices" :title="detail.name" :count="1" :position="buyPosition" :isFull="isFull"
				@close="closePayDialog" @success="showGiftsDialog" />

			<pay v-if="payBoxShow1" :gameId="detail.id" gameType="欧皇对决" :image="detail.main_photo" :price="buyPrice"
				:prices="rechargePrices" :title="detail.name" :count="1" :position="buyPosition" :isFull="isFull"
				@close="closePayDialog1" @success="showGiftsDialog1" />

			<!-- gifts popup -->
			<van-dialog use-slot :show="giftsDialogVisible" :show-confirm-button="false" width="312">
				<gifts-dialog-content :gifts="gifts" v-on:close="closeGiftsDialog" />
			</van-dialog>

		</view>

		<!-- 满单 -->
		<view v-show="fullData.hasFull==1" class="full">
			<view class="msg">
				<image class="avatar" :src="fullData.avatar" />
				<view class="right">
					<view>
						{{ fullData.nickname }}&nbsp;满单申请中
					</view>
					<view>倒计时结束后您方可抽取赏品</view>
				</view>
			</view>
			<view class="full-img">
				<image src="./static/pk-full-countdown.png" />
			</view>
			<view class="countdown">倒计时：{{ fullData.lastTime }}S</view>
		</view>
		<view v-show="fullData.hasFull==2" class="full">
			<view class="msg">
				<image class="avatar" :src="fullData.avatar" />
				<view class="right">
					<view>
						{{ fullData.nickname }}&nbsp;满单已申请
					</view>
					<view>可以进行满单</view>
				</view>
			</view>
			<!-- <view class="full-img">
			<image src="./static/pk-full.png" />
		</view>
		<view class="countdown">倒计时：{{ fullData.lastTime }}S</view> -->
		</view>
		<view v-show="fullData.hasFull==3" class="full">
			<view class="msg">
				<image class="avatar" :src="fullData.avatar" />
				<view class="right">
					<view>
						{{ fullData.nickname }}&nbsp;正在满单中
					</view>
					<view>倒计时结束后可进行满单</view>
				</view>
			</view>
			<view class="full-img">
				<image src="./static/pk-full-protect.png" />
			</view>
			<view class="countdown">倒计时：{{ fullData.lastTime }}S</view>
		</view>

		<!-- 取消等待中的对战 -->
		<view v-show="waitingCount" class="cancel">
			<view class="cancel-area">
				<view class="left">
					<image src="./static/pk-remind.png" />
					<text>您正在等待别人对战</text>
				</view>
				<view class="right" @click="cancelPK">取消</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	export default {
		name: 'PKdetail'
	}
</script>

<script lang="ts" setup>
	import moment from 'moment'
	import ProductsSwiperPk from '@/wxcomponents/products-swiper-pk'
	import PrizeGameTab from '../index/shared/prize-game-tab/index.vue'
	import PrizeDialogContent from '@/wxcomponents/prize-dialog-content'
	import Pay from '@/wxcomponents/pay'
	import GiftsDialogContent from '@/wxcomponents/gifts-dialog-content'
	import { loadDetail, loadRecord, loadFullState, loadWaiting, cancel } from "@/api/pk"
	import { onLoad, onReachBottom, onPullDownRefresh, onShow } from "@dcloudio/uni-app"
	import { ref, reactive, defineProps, onUnmounted, computed } from 'vue'
	import { buyPk, recharge, checkWallet } from "@/api/pay";
	let gameId = ref(0)
	let banners = ref([])
	let detail = ref({
		name: "",
		main_photo: ""
	})
	let tabs = ref(['赏品一览', '对战记录', '购买说明'])
	let tab = ref('赏品一览')
	let isCouponModalVisible = ref(false)
	let rechargePrices = ref([])
	let dialogItem = ref({})
	const emits = defineEmits(['success'])
	let payBoxShow = ref(false)
	let payBoxShow1 = ref(false)
	let buyPrice = ref(0)
	let buyCount = ref(0)
	let buyPosition = ref(0)
	let isFull = ref(0)
	let recordsList = ref([])
	let currentDate = ref('')
	// let fullDialogVisible = ref(false)
	let fullData = ref({
		hasFull: 0,
		lastTime: 0,
		nickname: '',
		avatar: ''
	})
	let waitingCount = ref(0)
	let recordCurrentPage = ref(1)
	let recordTotal = ref(100)

	const gifts = ref([])
	let countdown = null
	let downTimeout = null
	const giftsDialogVisible = ref(false)
	let downtext = ref(10)
	const shareData = computed(() => { // 分享的数据
		return {
			title: detail.value.name,
			imageUrl: detail.value.main_photo
		}
	})
	function sharegame() {
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	}
	function setdowntext() {
		downTimeout = setTimeout(() => {
			if (downtext.value > 0) {
				--downtext.value
				setdowntext()
			} else {
				try {
					recordsList.value[0]['red']['isclick'] = false
				} catch (e) {
					//TODO handle the exception
				}
				try {
					recordsList.value[0]['blue']['isclick'] = false
				} catch (e) {
					//TODO handle the exception
				}
				pkindex.value = -1
				pkid.value = -1
				pkcurrent.value = -1
			}
		}, 1000)
	}
	function showGiftsDialog(val) {
		if (val.length !== 0) {
			gifts.value = val
			giftsDialogVisible.value = true
		}
		listRecords({ refresh: true })
		getDetail()
		if (countdown) {
			clearInterval(countdown)
			fullData.value.lastTime = 0
			fullData.value.hasFull = 0
		}
	}
	function showGiftsDialog1(val) {
		if (val.length !== 0) {
			gifts.value = val
			giftsDialogVisible.value = true
		}

		listRecords({ refresh: true })
		getDetail()

	}
	function closeGiftsDialog() {
		giftsDialogVisible.value = false
		// TODO 这里需要对弹窗内的动作做更细分的判断
		getWaiting()
		emits('success')
	}
	onPullDownRefresh(async () => {
		if (tab.value == '对战记录') {
			await listRecords({ refresh: true })
			uni.stopPullDownRefresh();//停止刷新
		} else {
			await getDetail()
			getWaiting()
			uni.stopPullDownRefresh();//停止刷新
		}
	})

	// 查询满单状态
	async function getFullState() {
		if (fullData.value.lastTime !== 0) {
			return
		}
		let fullParams = {
			game_id: gameId.value
		}
		let { code, data } = await loadFullState(fullParams)
		let currentDate = new Date().getTime()
		fullData.value.hasFull = data.has_full || 0

		if (code === 0) {
			fullData.value.avatar = data.avatar
			fullData.value.nickname = data.nickname
		}

		if (code === 0 && data.has_full === 1) {
			let diffTime = Math.floor((currentDate - moment(data.last_time).toDate().getTime()) / 1000)
			if (diffTime > 10 || diffTime < 0) {
				return
			}
			let lastTime = 10 - diffTime
			fullData.value.lastTime = lastTime
			countdown = setInterval(() => {
				fullData.value.lastTime--
				if (fullData.value.lastTime === 0) {
					fullData.value.hasFull = 0
					clearInterval(countdown)
				}
			}, 1000)
		} else if (code === 0 && data.has_full === 3) {
			let diffTime = Math.floor((currentDate - moment(data.last_time).toDate().getTime()) / 1000)
			if (diffTime > 30 || diffTime < 0) {
				return
			}
			let lastTime = 30 - diffTime
			fullData.value.lastTime = lastTime
			countdown = setInterval(() => {
				fullData.value.lastTime--
				if (fullData.value.lastTime === 0) {
					fullData.value.hasFull = 0
					clearInterval(countdown)
				}
			}, 1000)
		}
	}
	let pkindex = ref(0)
	let pkcurrent = ref(0)
	let pkid = ref(0)
	function openclickpay(index : number, current : number, id : number, istwo : boolean) {
		pkindex.value = rechargePrices.value[index]["position"]
		pkcurrent.value = current
		pkid.value = id
		console.log(pkindex.value, pkcurrent.value, pkid.value)
		if (istwo) {
			payment()
			return
		}
		showPayDialog1(rechargePrices.value[index])
	}
	async function showPayDialog(item) {
		// 查询满单状态
		// getFullState()
		// 购买
		payBoxShow.value = true

		buyCount.value = item.count
		buyPrice.value = item.price
		buyPosition.value = item.position
		isFull.value = item.isFull
	}
	async function showPayDialog1(item) {
		// 查询满单状态
		// getFullState()
		// 购买
		payBoxShow1.value = true
		buyCount.value = item.count
		buyPrice.value = item.price
		buyPosition.value = item.position
		isFull.value = item.isFull
	}
	function closePayDialog() {
		payBoxShow.value = false
		getWaiting()
	}
	function closePayDialog1() {
		payBoxShow1.value = false
		getWaiting()
	}

	function goBack() {
		uni.switchTab({
			url: '/pages/pk/index'
		})
	}

	async function getDetail() {
		const params = {
			game_id: gameId.value
		}
		const { code, data } = await loadDetail(params)

		// 商品价格从单位分转为元
		for (let i = 0; i < data.products.length; i++) {
			data.products[i].price = (data.products[i].price / 100).toFixed(2)
			data.products[i].showStock = "数量:" + data.products[i].stock + "/" + data.products[i].count
		}

		data.banner = data.banner.split(';')
		for (let i = 0; i < data.banner.length; i++) {
			banners.value.push({
				'main_photo': data.banner[i]
			})
		}

		let pricesList = [
			{
				position: 2,
				price: data.price,
				showPrice: (data.price / 100).toFixed(2),
				count: 1,
				isFull: 0,
				bg: 'https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/pk-blue.png'
			},
			{
				position: 1,
				price: data.price,
				showPrice: (data.price / 100).toFixed(2),
				count: 3,
				isFull: 0,
				bg: 'https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/pk-red.png'
			},
			{
				position: 3,
				price: data.price * 2,
				showPrice: (data.price * 2 / 100).toFixed(2),
				count: 10,
				isFull: 1,
				bg: 'https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/pk-all.png'
			},
		]

		rechargePrices.value = pricesList
		detail.value = data
	}

	function showDialogImage(item) {
		dialogItem.value = {
			image: item.image,
			name: item.name,
			price: item.price,
		}
		isCouponModalVisible.value = true
	}

	function closeCouponModal() {
		isCouponModalVisible.value = false;
	}

	onLoad(async (options) => {
		const id = options.id || 0
		if (!id) {
			uni.showToast({
				title: 'id参数错误',
				icon: 'none'
			})
			return
		}
		gameId.value = id
		await getDetail()
		getWaiting()
		uni.$mpShare = shareData.value // 修改uni.$mpShare的值

	});
	onShow(() => {
		uni.$mpShare = shareData.value // 修改uni.$mpShare的值
	})

	async function listRecords({ refresh = true }) {
		if (tab.value === '对战记录') {
			if (!refresh && recordTotal.value === recordsList.value.length) {
				return
			}
			if (refresh) {
				recordCurrentPage.value = 1
			}
			const params = {
				game_id: gameId.value,
				page: refresh ? 1 : recordCurrentPage.value + 1,
				size: 15
			}
			let img = ''
			let { code, data } = await loadRecord(params)
			console.log(pkindex.value, pkcurrent.value, pkid.value)
			for (let i = 0; i < data.items.length; i++) {
				data.items[i].result.forEach(item => {
					const timeObj = moment(item['join_time']);
					if (item.outcome === '失败') {
						img = '/static/pk-fail.png'
					}
					if (item.outcome === '胜利') {
						img = '/static/pk-victory.png'
					}
					item['join_time'] = timeObj.format('YYYY-MM-DD HH:mm:ss')
					if (item.position === 2) {
						data.items[i].blue = {
							avatar: item.avatar,
							time: item.join_time,
							nickname: item.nickname,
							outcome: item.outcome === '进行中' ? '待揭晓' : item.outcome,
							prizeType: item.prize ? item.prize.type + ' 赏' || '' : '',
							prizeName: item.prize ? item.prize.name : '',
							gameType: item.prize ? item.prize.game_type : '',
							img: img,
							isclick: pkid.value > 0 && i == 0 ? true : false
						}
					}
					if (item.position === 1) {
						data.items[i].red = {
							avatar: item.avatar,
							time: item.join_time,
							nickname: item.nickname,
							outcome: item.outcome === '进行中' ? '待揭晓' : item.outcome,
							prizeType: item.prize ? item.prize.type + ' 赏' || '' : '',
							// prizeType: item.prize.type + ' 赏' || '',
							prizeName: item.prize ? item.prize.name : '',
							gameType: item.prize ? item.prize.game_type : '',
							img: img,
							isclick: pkid.value > 0 && i == 0 ? true : false
						}
					}
				});
			}
			if (pkid.value > 0) {
				if (downTimeout) {
					clearTimeout(downTimeout)
				}
				downtext.value = 10
				setdowntext()
			}
			let date = new Date()
			currentDate.value = moment(date).format('YYYY-MM-DD HH:mm:ss')
			recordsList.value = refresh ? data.items : recordsList.value.concat(data.items)
			recordTotal.value = data.total
		} else if (tab.value === '赏品一览') {
			getDetail()
		}
	}

	onReachBottom(async () => {
		if (tab.value !== '对战记录') {
			return
		}
		await listRecords({ refresh: false })
	})

	// 取消等待中的对战
	async function cancelPK() {
		let params = {
			game_id: parseInt(gameId.value)
		}
		await cancel(params)
		await getWaiting()
		await listRecords({ refresh: true })
	}

	// 获取当前是否有等待中的对战
	async function getWaiting() {
		let params = {
			game_id: gameId.value
		}
		let { code, data } = await loadWaiting(params)
		waitingCount.value = data.total || 0
	}

	let fullCountdown = setInterval(getFullState, 2000)

	onUnmounted(() => {
		// 销毁定时器
		clearInterval(fullCountdown);
	})
	async function payment() {
		let checkParas = {
			game_type: "欧皇对决",
			game_id: detail.value.id,
			count: 1,
			is_full: 0,
			use_score: 0,
			coupon_id: null
		}
		// 查看余额
		let checkRes = await checkWallet(checkParas)
		if (checkRes.data.enough === 1) {
			// 余额充足
			gamePayment()
		} else {


			// 余额不足
			const { data } = await recharge({ price: checkRes.data.need })
			const jspay = data.jspay
			uni.requestPayment({
				provider: 'wxpay',
				appid: 'wx900d129b8768ed6b',
				timeStamp: jspay.timestamp,
				nonceStr: jspay.nonceStr,
				package: jspay.package,
				signType: jspay.signType,
				paySign: jspay.paySign,
				success: function (res) {
					gamePayment()
				},
				fail: function (err) {
					uni.showToast({
						title: '取消支付',
						icon: 'none'
					})
				}
			})
		}
	}
	async function gamePayment() {
		const data = {
			type: "欧皇对决",
			game_id: detail.value.id,
			count: 1,
			position: pkindex.value,
			is_full: 0,
			coupon_id: 0
		}

		const res = await buyPk(data)
		let gifts = res.data.gifts || []
		showGiftsDialog1(gifts)
	}
</script>



<style lang="scss">
	@import 'src/static/scss/maincommon';

	.content {
		padding: 0;
	}

	.nav {
		width: 100%;
		height: 180rpx;
		color: #FFF;
		line-height: 300rpx;
		position: relative;

		.nav-bg {
			width: 100%;
			height: 200rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.pk {
			padding-left: 40rpx;
			position: relative;
			z-index: 100;

			.arrow {
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;
			}
		}
	}

	.detail-content {
		padding: 0 30rpx 30rpx;

		.tab-content {
			padding-bottom: 250rpx;
			margin-top: 30rpx;
			color: #FFF;
		}

		.records-list {
			.records-item {
				height: 250rpx;
				margin-top: 30rpx;
				padding: 55rpx 45rpx;
				box-sizing: border-box;
				background-image: url("https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/pk-record-bg.png");
				background-size: contain;
				background-repeat: no-repeat;
				font-size: 18rpx;
				// color: #FFF;

				.record-detail {
					height: 100%;
					display: flex;
					justify-content: space-between;

					.player {
						display: flex;
						position: relative;
						color: #ffffff;

						.pk-info {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							flex: 1;
							.pk-info-name {
								width: 171rpx;
								text-overflow: ellipsis;
								overflow: hidden;
								word-break: break-all;
								white-space: nowrap;
							}
						}
					}

					.blue .crown {
						position: absolute;
						bottom: 70rpx;
						left: -20rpx;
					}

					.red .crown {
						position: absolute;
						bottom: 70rpx;
						right: 40rpx;
					}

					.crown image {
						width: 60rpx;
						height: 40rpx;
					}

					.blue .result {
						position: absolute;
						top: 5rpx;
						right: 0rpx;
					}

					.red .result {
						position: absolute;
						top: 5rpx;
						left: 0rpx;
					}

					.result image {
						width: 80rpx;
						height: 60rpx;
					}

					.left {
						margin-right: 10rpx;
					}

					.red .left {
						text-align: right;
					}

					.location {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						text-align: center;
					}

					.avatar {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						background-color: #FFF;
						position: relative;

						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}

						.graybg {
							position: absolute;
							left: 0;
							top: 0;
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}

						.itemgray {
							// background-color: rgba(173, 173, 173, 0.08) !important;
						}
					}
				}
			}

			.nofull {
				text-align: center;
				padding: 200rpx;

				image {
					width: 200rpx;
					height: 200rpx;
				}
			}

			.records_itemgray {
				color: #adadad !important;
			}

			.records-item-blue {
				background-image: url("https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/blue_success.png");
				background-size: contain;
				background-repeat: no-repeat;
			}

			.records-item-red {
				background-image: url("https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/red_success.png");
				background-size: contain;
				background-repeat: no-repeat;
			}
		}

		.products-list {
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 30%;
				margin: 8rpx;

				.img {
					// width: 220rpx;
					height: 176rpx;
					padding: 20rpx;
					background-image: url("~@/static/pk-productbg.png");
					background-size: cover;
					background-repeat: no-repeat;
					position: relative;
					font-size: 16rpx;

					.game-img {
						width: 170rpx;
						height: 170rpx;
					}

					.finish {
						height: 88%;
						width: 94%;
						position: absolute;
						top: 4px;
						left: 3%;
						opacity: 1;
						background-color: #000;
						display: flex;
						align-items: center;
						justify-content: center;
						background: url("/static/owo/product-item-soldout.png") no-repeat top;
						background-size: contain;
					}

					.quantity {
						height: 30rpx;
						width: 170rpx;
						text-align: center;
						background-color: #000;
						opacity: 0.8;
						position: absolute;
						bottom: 26rpx;
						line-height: 30rpx;
					}

					.tag {
						height: 40rpx;
						width: 60rpx;
						position: absolute;
						top: 20rpx;
						border-radius: 10rpx;
						font-size: 26rpx;
						text-align: center;
						line-height: 40rpx;
						background: linear-gradient(90deg, rgba(225, 116, 237, 1) 0%, rgba(47, 118, 236, 1) 100%);
					}
				}

				.name {
					margin-top: 5rpx;
					font-size: 20rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.price {
					margin-top: 5rpx;
					font-size: 20rpx;

					.number {
						color: #B0B0B0;
					}
				}
			}
		}

		.instructions {
			width: 100%;
			aspect-ratio: 702/384;
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			flex-direction: column;
			box-sizing: border-box;
			padding: 22px 18px 0;
			color: white;
			position: relative;

			.title {
				font-size: 14px;
				margin-bottom: 10px;
			}

			.content {
				font-size: 10px;
				line-height: 14px;
			}

			.bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}
	}

	.buy-area {
		width: 100%;
		height: 200rpx;
		padding-top: 30rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		// background-color: #0A050B;

		image {
			width: 220rpx;
			height: 110rpx;
		}

		.buy-btn {
			position: relative;
			color: #FFF;

			.price {
				width: 100%;
				height: 30rpx;
				position: absolute;
				left: 0;
				bottom: 90rpx;
				font-size: 20rpx;
				text-align: center;
				line-height: 30rpx;

				text {
					padding: 5rpx;
					background: linear-gradient(90deg, #205DE9 0%, #8E6CF4 100%);
					border-radius: 5rpx;
				}
			}
		}
	}

	.with-bottom-panel {
		position: relative;
		padding-bottom: 200px;
	}

	.bottom-panel {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.full {
		padding: 10rpx;
		position: fixed;
		left: 0;
		top: 200rpx;
		background: rgba(0, 0, 0, 0.8);
		color: #FFF;

		.msg {
			display: flex;
			font-size: 18rpx;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}

			.right {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: 30rpx;
			}
		}

		.full-img {
			text-align: center;
			margin: 20rpx 0;

			image {
				width: 160rpx;
				height: 120rpx;
			}
		}

		.countdown {
			text-align: center;
			font-size: 34rpx;
			font-weight: 500;
		}
	}

	.cancel {
		width: 100%;
		position: fixed;
		bottom: 300rpx;
		left: 0;
		color: #FFF;
		font-size: 24rpx;

		.cancel-area {
			margin: 0 30rpx;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			background: #454545;
			border-radius: 10rpx;
		}

		.left {
			image {
				width: 30rpx;
				height: 30rpx;
				vertical-align: bottom;
			}

			text {
				margin-left: 20rpx;
			}
		}

		.right {
			padding: 5rpx 20rpx;
			background: linear-gradient(90deg, #205DE9 0%, #8E6CF4 100%);
			border: 1px solid #000000;
			border-radius: 10rpx;
		}
	}

	.red {
		.doubleclick {
			position: absolute;
			left: 20rpx;
			top: -5rpx;
			z-index: 33;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 120rpx;
				height: 120rpx;
			}

			text {
				color: #ffffff;
				font-size: 28rpx;
			}
		}
	}

	.blue {
		.doubleclick {
			position: absolute;
			right: 20rpx;
			top: -5rpx;
			z-index: 33;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 120rpx;
				height: 120rpx;
			}

			text {
				color: #ffffff;
				font-size: 28rpx;
			}
		}
	}
</style>